<script lang="ts" setup>
import { inject, ref, defineEmits, defineProps, watchEffect } from 'vue';
import comNavigation from '../com-navigationBar/com-navigation.vue';
import { computed } from '@vue/reactivity';
import { deletePatientDelByIdAPI, postPatientAddAPI, putPatientUpdateAPI } from '@/api/healthEncyclopedia';
import type { FamilyData } from '@/types/types';
import comNextButton from '../com-nextButton/com-nextButton.vue';
import { showToast } from 'vant';
// data 可传可不传 不穿说明要添加调用添加接口 传就说明要修改
// flag 获取列表的数据数组长度为 0 flag作为 true 传进来 添加信息时数据必须选中默认才可添加
const props = defineProps<{ data?: FamilyData, flag?: boolean, title: string }>()
const emits = defineEmits(['fn'])
const close = inject('close') as Function
const cardId = ref(props.data?.idCard || '');
const name = ref(props.data?.name || '')
const checked = ref(props.data?.defaultFlag || false)
const gender = ref(props.data?.gender || 1)
const changeGender = (val: number) => {
  gender.value = val
}
const cardIdFlag = computed(() => {
  const RegExp = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  if (RegExp.test(cardId.value)) {
    return true
  } else {
    return false
  }
})
// 监听 输入身份证的值 如果大于18就判断倒数第二位是奇数还是偶数 是奇数说明是男性 是偶数说明是女性
watchEffect(() => {
  if (cardId.value.length === 18) {
    let num = parseInt(cardId.value[16])
    if (num % 2 === 1) {
      gender.value = 1
    } else {
      gender.value = 0
    }

  }
})
const defaultFlag = computed(() => {
  if (checked.value) {
    return 1
  } else {
    return 0
  }
})
const postPatientAddData = async () => {
  if (!props.data) {
    let res = await postPatientAddAPI(name.value, cardId.value, defaultFlag.value, gender.value)
    if (res.data.code === 10000) {
      emits('fn')
    }
  } else {
    // 修改
    let res = await putPatientUpdateAPI(name.value, cardId.value, defaultFlag.value, gender.value, props.data.id)
    if (res.data.code === 10000) {
      emits('fn')
    }
  }
}

const deletePatientDelByIdData = async () => {
  let res = await deletePatientDelByIdAPI(props.data!.id)
  if (res.data.code === 10000) {
    showToast({
      message: "删除成功"
    })
    emits('fn')
  }
}
const show = computed(() => {
  if (props.flag) {
    if (!cardIdFlag.value || !cardIdFlag.value || !checked.value) {
      return true
    } else {
      return false
    }
  } else {
    if (!cardIdFlag.value || !cardIdFlag.value) {
      return true
    } else {
      return false
    }
  }
})
</script>
<template>
  <comNavigation :fn="close">
    <template #title>
      <div class="title">{{ title }}</div>
    </template>
    <template #right>
      <div class="save">
        <div class="disabled" v-show="show"></div>
        <div class="btn" @click="postPatientAddData">保存并选择</div>
      </div>
    </template>
  </comNavigation>
  <van-form>
    <van-cell-group inset>
      <van-field v-model="name" label="患者姓名" placeholder="请输入姓名" />
      <van-field v-model="cardId" label="患者身份证号" placeholder="请输入身份证号" />
      <van-field name="radio" label="单选框">
        <template #input>
          <div class="radioPox">
            <div class="disabled" v-show="cardId.length === 18"></div>
            <div class="radioBox">
              <div class="sex" :class="gender === 1 ? 'active' : ''" @click="changeGender(1)">男</div>
              <div class="sex" :class="gender === 0 ? 'active' : ''" @click="changeGender(0)">女</div>
            </div>
          </div>
        </template>
      </van-field>
      <van-field name="checkbox" label="默认就诊人">
        <template #input>
          <van-checkbox checked-color="#2cb5a5" v-model="checked" />
        </template>
      </van-field>
    </van-cell-group>
  </van-form>
  <div class="btnBox" v-if="props.data">
    <comNextButton @onClick="deletePatientDelByIdData" :disabled="false" title="删除"></comNextButton>
  </div>
</template>
<style scoped lang="scss">
.title {
  font-size: 16px;
}

.save {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;

  .btn {
    font-size: 14px;
    padding: 6px 12px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 17px;
    background-color: rgba(44, 181, 165, .1);
    color: #16c2a3;
    border: 1px solid #16c2a3;
    margin-left: 20px;
  }

  .disabled {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #fff, $alpha: 0.6);
    z-index: 10;
  }
}

.radioPox {
  position: relative;

  .radioBox {
    display: flex;
    justify-content: center;
    align-items: center;

    .sex {
      padding: 4px 12px;
      font-size: 15px;
      background-color: #f5f5f5;
      color: #333;
      margin-right: 10px;
      width: 44px;
      text-align: center;
      border: 1px solid transparent;
      border-radius: 3px
    }

    .active {
      border-color: #2cb5a5;
      background-color: #e7f1ff;
      color: #16c2a3;
    }
  }

  .disabled {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #fff, $alpha: 0.6);
    z-index: 10;
  }
}

.btnBox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
}
</style>
